<template>
  <div id="userCenter" class="user-center">
    <blur class="header-wrapper" :blur-amount="16" :url="avatarUrl" :style="'height: ' + (userRole === 'renter' ? '14rem' : '12rem') ">
      <p class="avatar"><router-link to="/userInfo"><img :src="avatarUrl"><span v-if="userRole === 'landlord'" class="approve"></span><span v-if="userRole === 'renter'" class="noApprove"></span></router-link></p>
      <p class="user-info"><router-link to="/userInfo">{{ nickname }}<br><span class="mobile">{{ userInfo.mobile || '' }}</span></router-link></p>
      <div class="icon-wrapper">
        <router-link to="/msg/renter" v-if="userRole === 'renter'"><img src="../../images/user/icon_message_1.png"/></router-link>
        <router-link to="/msg/landlord" v-if="userRole === 'landlord'"><img src="../../images/user/icon_message_1.png"/></router-link>
        <router-link to="/setting"><img src="../../images/user/icon_setting_1.png"/></router-link>
      </div>
      <!--<a class="btn-change-role" href="javascript: void(0)" @click="changeRole"><img src="../../images/user/icon_switch.png"/>&nbsp;{{ btnText }}</a>-->
    </blur>
    <div class="body-wrapper" v-if="userRole === 'renter'">
      <!--<flexbox class="flexbox-wrapper" :gutter="0">-->
        <!--<flexbox-item :span="1/2"><router-link class="divider" to="/houseOfConcern"><p><span>{{ countObj.houseCount || 0 }} </span>套</p><p class="title">关注房源</p></router-link></flexbox-item>-->
        <!--<flexbox-item :span="1/2"><router-link class="divider" to="/myReservationForRenter"><p><span>{{ countObj.reservationCount || 0 }} </span>套</p><p class="title">预约清单</p></router-link></flexbox-item>-->
        <!--<flexbox-item :span="1/3"><router-link class="divider" to="/lookHouseSchedule"><p><span>{{ countObj.scheduleCount || 0 }}</span>套</p><p class="title">看房日程</p></router-link></flexbox-item>-->
      <!--</flexbox>-->
      <flexbox class="flexbox-wrapper flexbox-9-cells" :gutter="0" wrap="wrap">
        <flexbox-item :span="1/3"><router-link to="/myReservationForRenter"><div><img src="../../images/user/icon_clock.png"/><br/><p class="title">我的预约</p></div></router-link></flexbox-item>
        <flexbox-item :span="1/3"><router-link to="/houseOfConcern"><div><img src="../../images/user/icon_concern.png"/><br/><p class="title">我的关注</p></div></router-link></flexbox-item>
        <flexbox-item :span="1/3"><router-link to="/myOrderForRenter"><div><img src="../../images/user/icon_renter_order.png"/><br/><p class="title">我的订单</p></div></router-link></flexbox-item>
        <flexbox-item :span="1/3"><router-link to="/myContract"><div><img src="../../images/user/icon_my_contract.png"/><br/><p class="title">我的合同</p></div></router-link></flexbox-item>
        <flexbox-item :span="1/3"><a @click="$vux.toast.text('暂未支持')"><div><img src="../../images/user/icon_credit.png"/><br/><p class="title">我的信用</p></div></a></flexbox-item>
        <flexbox-item :span="1/3"><a @click="$vux.toast.text('暂未支持')"><div><img src="../../images/user/icon_e_certificate.png"/><br/><p class="title">电子凭证</p></div></a></flexbox-item>
        <!--<flexbox-item :span="1/3"><router-link to="/cardSetting"><div><img src="../../images/user/icon_bank_card.png"/><br/><p class="title">我的银行卡</p></div></router-link></flexbox-item>-->
      </flexbox>
    </div>
    <div class="body-wrapper" v-if="userRole === 'landlord'" style="margin-top: 0">
      <group class="setting-group">
        <cell title="帮助中心" link="/userHelp" is-link></cell>
        <cell title="收款设置" link="/cardSetting" is-link></cell>
        <cell title="关于城壹宜居" link="/about" is-link></cell>
      </group>
    </div>
    <div :class="{'landlordMarginTop': userRole=='landlord'}">
      <x-button type="primary" @click.native="changeRole" :text="btnText"></x-button>
    </div>
  </div>
</template>
<script>
  import { Blur, Flexbox, FlexboxItem, Cell } from 'vux'
  export default {
    name: 'userCenter',
    components: {
      Blur,
      Flexbox,
      FlexboxItem,
      Cell
    },
    data () {
      return {
        userRole: 'renter',
        avatarUrl: '',
        nickname: '',
        userInfo: {},
        countObj: {},
        btnText: '切换为房东'
      }
    },
    created () {
      let imgUrl = localStorage.getItem('headUrlImg')
      let nickName = localStorage.getItem('nickName')
      !imgUrl || imgUrl === 'undefined' ? this.avatarUrl = require('../../images/avatar_default.png') : this.avatarUrl = imgUrl
      !nickName || nickName === 'undefined' ? this.nickname = '' : this.nickname = nickName
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.userInfo = this.userInfo ? this.userInfo : {}
      let qs = this.$route.query
      // 如果URL携带了角色信息则使用URL角色，反之则使用状态保存的角色
      if (qs && qs.userRole) {
        this.userRole = qs.userRole
        this.$store.commit('login/saveUserType', this.userRole)
      } else {
        this.userRole = this.$store.state.login.userRole
      }
      if (this.userRole === 'landlord') {
        this.btnText = '切换为租客'
      } else {
        this.btnText = '切换为房东'
      }
      // this.$axiosPosting(this.$api.queryLinkInfoCount, {
      //   userId: this.userInfo.id || ''
      // }).then(json => {
      //   if (json.code === '0000') {
      //     this.countObj = json.data
      //   }
      // })
    },
    methods: {
      onImgError (item, $event) {
        // console.log(item, $event)
      },
      changeRole () {
        switch (this.userRole) {
          case 'renter':
            this.userRole = 'landlord'
            this.btnText = '切换为租客'
            break
          case 'landlord':
            this.userRole = 'renter'
            this.btnText = '切换为房东'
            break
        }
        this.$store.commit('login/saveUserType', this.userRole)
        this.$router.replace({query: {userRole: this.userRole}})
      }
    }
  }
</script>
<style lang="less">
  @import "../../styles/baseVar";
  .user-center {
    .header-wrapper {
      position: relative;
      height: 14rem;
      p {
        position: relative;
        text-align: center;
      }
      .avatar {
        padding-top: 1rem;
        font-size: 0;
        img {
          width: 3.5rem;
          height: 3.5rem;
          border-radius: 50%;
          border: .2rem solid rgba(255, 255, 255, .4);
        }
        .approve{
          position: absolute;
          width:  4.3rem;
          height: 1.4rem;
          background: url("../../images/landlordlogo.png") no-repeat;
          background-size: 100% 100%;
          left: 50%;
          bottom: -0.3rem;
          margin-left: -2.15rem;
        }
        .noApprove{
          position: absolute;
          // width:  2.35rem;
          // height: .825rem;
          width:  4.3rem;
          height: 1.4rem;
          background: url("../../images/renterlogo.png") no-repeat;
          background-size: 100% 100%;
          left: 50%;
          bottom: -0.3rem;
          margin-left: -2.15rem;
        }
      }
      .user-info {
        margin-top: .4rem;
        font-size: 0;
        a {
          font-size: .75rem;
          line-height: 1.4;
          color: #fff;
        }
        .mobile {
          color: rgba(255, 255, 255, .5);
        }
      }
      .icon-wrapper {
        position: relative;
        margin-top: .5rem;
        font-size: 0;
        text-align: center;
        a {
          margin-right: 2rem;
          font-size: 0;
          vertical-align: top;
        }
        a:last-child {
          margin-right: 0;
        }
        img {
          width: 1.9rem;
          height: 1.9rem;
        }
      }
      .avatar,
      .user-info,
      .icon-wrapper {
        position: relative;
        z-index: 1;
      }
      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
      }
      .vux-bg-blur {
        z-index: 0;
      }
      .btn-change-role {
        position: absolute;
        top: 1rem;
        left: 0;
        z-index: 1;
        display: block;
        /*width: 5.25rem;*/
        height: 1.5rem;
        padding: .4rem .5rem;
        font-size: .7rem;
        line-height: 1;
        color: #fff;
        background: rgba(0, 0, 0, .6);
        border-radius: 0 1rem 1rem 0;
        box-sizing: border-box;
        opacity: .6;
        img {
          width: .6rem;
        }
      }
    }
    .body-wrapper {
      margin-top: -3.2rem;
      padding: 0 4%;
       .weui-cells {
      background: transparent;
    }
    .weui-cells {
      margin-top: 0;
    }
    .weui-cell {
      background: #fff;
    }
    }
    .flexbox-wrapper {
      position: relative;
      z-index: 1;
      margin-bottom: .7rem;
      text-align: center;
      border-radius: .2rem;
      background: #fff;
      box-shadow: 0 0 15px 5px rgba(0, 0, 0, .1);
      overflow: hidden;
      .vux-flexbox-item {
        height: 5rem;
        a {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: 100%;
          height: 100%;
          p {
            font-size: .75rem;
            line-height: 1;
            color: #777;
            span {
              font-size: 1.8rem;
              font-style: italic;
              color: #ff9600;
            }
          }
          p.title {
            margin-top: .75rem;
            color: #000;
          }
          span {
            color: #777;
          }
        }
        .divider:after {
          content: '';
          position: absolute;
          top: 30%;
          right: 0;
          display: block;
          height: 40%;
          border-right: 1px solid #e5e5e5;
        }
      }
      .vux-flexbox-item:last-child {
        .divider:after {
          display: none;
        }
      }
    }
    .flexbox-9-cells {
      .vux-flexbox-item {
        height: 5.5rem;
        a {
          border-right: 1px solid #e5e5e5;
          border-bottom: 1px solid #e5e5e5;
          div {
            font-size: 0;
          }
          p.title {
            margin-top: .6rem;
          }
          img {
            width: 1.2rem;
            object-fit: cover;
          }
          span {
            font-size: @font-size-15;
            color: @color-333333;
          }
        }
      }
      .vux-flexbox-item:nth-child(3n) {
        a {
          border-right: 0;
        }
      }
    }
    .weui-btn {
      width: 92%;
      margin: 1rem auto .5rem;
    }
     .weui-cells {
      background: transparent;
    }
    .weui-cells {
      margin-top: 0;
    }
    .weui-cell {
      background: #fff;
    }
  }
  .landlordMarginTop .weui-btn{
     margin: 4.2rem auto .5rem;
  }
</style>
